<template>
  <div class="app-wrapper">
    <div class="left-box" v-if="activeTab == 0">
      <div class="back" @click="toWorkspace">
        <Icon type="md-arrow-back" size="24" />
        <span>返回</span>
      </div>
      <div class="info">
        <div class="info-title">{{ formData.name || '对话' }}</div>
        <div class="sub-text">{{ formData.description || '描述' }}</div>
        <div class="info-btns">
          <!-- <Button type="plian" icon="ios-chatbubbles-outline">对话</Button> -->
          <Button type="plian" icon="ios-settings-outline" @click="handleEdit"
            >设置</Button
          >
          <!-- <Button type="plian" icon="ios-more"></Button> -->
        </div>
      </div>
      <div class="settings">
        <AISettings ref="aiSettingsRef" :form="formData" :modelList="modelList" />
        <Knowledge :form="formData" ref="knowledgeRef"  />
        <Tools :form="formData" ref="toolsRef" />
        <FileUpload :form="formData" />
        <Variable :form="formData" />
        <Prologue :form="formData" />
        <Voice :form="formData" :modelList="modelList" />
        <VoiceInput :form="formData" />
        <Guess :form="formData" :modelList="modelList" />
        <Guide :form="formData" />
      </div>
    </div>
    <div class="right-box" :class="{ full: activeTab != 0 }">
      <div class="header-box" :class="{ center: activeTab != 0 }">
        <div class="tab-list">
          <div
            class="tab-item"
            :class="{ active: activeTab == i }"
            v-for="(item, i) in DEFAULT_TABS"
            :key="i"
            @click="handleTabChange(i)"
          >
            {{ item }}
          </div>
        </div>
        <div class="actions" v-if="activeTab == 0">
          <div class="status">
            <div class="status-point"></div>
            {{isSave ? '已保存':'未保存'}}
          </div>
          <!-- <Button type="plian" icon="md-time"></Button> -->
          <Button type="primary" @click="handleSave" :loading="loading"
            >保存</Button
          >
        </div>
      </div>
      <Chatbot v-show="activeTab == 0" :aiid="id" />
      <PostChannel v-show="activeTab == 1" />
      <Log v-show="activeTab==2" />
    </div>
  </div>
  <EditProjectDialog ref="editProjectRef" @submit="editProjectSuccess" />
</template>
<script setup>
import { ref, watch, getCurrentInstance, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { detailAgent, saveAgent, listModel } from '@/api/modules/agent';
import { navTabStore } from '@/store/navTab';

import Chatbot from './components/Chatbot.vue';
import PostChannel from './components/PostChannel.vue';
import Log from './components/Log.vue';
import EditProjectDialog from './components/EditProjectDialog.vue';

import AISettings from './components/AISettings.vue';
import Knowledge from './components/Knowledge.vue';
import Tools from './components/Tools.vue';
import FileUpload from './components/FileUpload.vue';
import Variable from './components/Variable.vue';
import Prologue from './components/Prologue.vue';
import Voice from './components/Voice.vue';
import VoiceInput from './components/VoiceInput.vue';
import Guess from './components/Guess.vue';
import Guide from './components/Guide.vue';

const DEFAULT_TABS = ['应用配置', '发布渠道', '对话日志'];
const { proxy } = getCurrentInstance();

const route = useRoute();
const router = useRouter();
const {delVisitedRoute} = navTabStore();
const isSave = ref(false);
const loading = ref(false);
const activeTab = ref(0);
const handleTabChange = (index) => {
  if (activeTab.value == index) return;
  activeTab.value = index;
};
// 智能体ID
const id = ref(undefined);
const formData = ref({
  id: undefined,
  serviceaiid: undefined,
  name: undefined,
  description: undefined,
  starturl: undefined,
  aimodel: undefined,
  promptwords: undefined,
  knowledgemodel: undefined,
  toolList: [],
  isenable: undefined,
  filemax: undefined,
  opendialog: undefined,
  voicemodel: undefined,
  speed: undefined,
  enablevoiceinput: undefined,
  autosend: undefined,
  autoreply: undefined,
  askmodel: undefined,
  isenableask: undefined,
  customword: undefined,
  isinput: undefined,
  lexicon: undefined,
  customurl: undefined,
  globalvarList: [],
  // ai 配置
  configaimodel: undefined,
  numround: undefined,
  replylimit: undefined,
  temperature: undefined,
  topp: undefined,
  stopsequence: undefined,
  peplyformat: undefined,
  // 知识库配置
  // knowstrategy: undefined,
  // segmentcount: undefined,
  // maxasslength: undefined,
  // determination: undefined,
  // notprocessing: undefined,
  // ourcedisplay: undefined,
  // enhancement: undefined,
  knowstrategy: 0,
  segmentcount: 5,
  maxasslength: 2000,
  determination: 0,
  notprocessing: 0,
  ourcedisplay: false,
  enhancement: false,
});

const aiSettingsRef = ref(null);
const knowledgeRef = ref(null);
const toolsRef = ref(null);
// 获取智能体详情
async function getAgentDetail() {
  const { data } = await detailAgent({ data: { id: id.value } });
  const unEditKeys = []
  for(const key in formData.value) {
    if(unEditKeys.includes(key)) {
      continue
    }
    if (data[key] != null) {
      formData.value[key] = data[key]
    }
  }
  console.log(formData.value)
  aiSettingsRef.value.init();
  knowledgeRef.value.init();
  toolsRef.value.init();
}
// 大模型数据
const modelList = ref([]);
const getModelList = async () => {
  const { data } = await listModel();
  modelList.value = data;
};
const editProjectRef = ref(null);
const handleEdit = () => {
  editProjectRef.value?.init(formData.value);
};

const editProjectSuccess = (data) => {
  formData.value.name = data.name;
  formData.value.description = data.description;
};
const toWorkspace = () => {
  router.replace('/workspace');
  delVisitedRoute(route.path);
}
const handleSave = async () => {
  console.log(formData.value);
  loading.value = true;
  try {
    await saveAgent({ data: { ...formData.value } });
    proxy.$Message.success('保存成功');
    isSave.value = true;
    setTimeout(() => {
      toWorkspace();
    }, 500)
  } finally {
    loading.value = false;
  }
};



watch(() => route.query.id, (newId, oldId) => {
  id.value = newId;
  getModelList();
  getAgentDetail();
})

onMounted(() => {
  id.value = route.query.id;
  getModelList();
  getAgentDetail();
})
</script>
<style lang="scss">

.app-wrapper {
  display: flex;
  overflow: hidden;
  height: 100%;
  .back {
    width: 100px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
    span {
      font-size: 16px;
    }
  }
  .info {
    padding: 20px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0px 4px 4px 0px rgba(19, 51, 107, 0.05),
      0px 0px 1px 0px rgba(19, 51, 107, 0.08);
    .info-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .sub-text {
      font-size: 13px;
      color: #666;
      width: 380px;
      height: 42px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .info-btns {
      margin-top: 10px;
      .ivu-btn {
        margin-right: 10px;
      }
    }
  }
  .settings {
    overflow-y: auto;
    max-height: calc(100vh - 280px);
    margin-top: 20px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0px 4px 4px 0px rgba(19, 51, 107, 0.05),
      0px 0px 1px 0px rgba(19, 51, 107, 0.08);
  }
  .settings-item {
    padding: 20px;
    border-bottom: 1px solid #e8ebf0;
    .title {
      font-size: 14px;
      font-weight: 600;
    }
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .flex-box {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      &.wrap {
        flex-wrap: wrap;
        .label {
          width: 100%;
        }
      }
      .label {
        width: 120px;
      }
      .items {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .ml-1 {
      margin-left: 10px;
    }
  }
  .ivu-icon {
    cursor: pointer;
  }
  .left-box {
    width: 550px;
    min-width: 550px;
    height: 100%;
    overflow: hidden;
  }
  .right-box {
    width: 100%;
    min-width: 450px;
    margin-left: 20px;
    overflow: hidden;
    &.full {
      width: 100%;
    }
  }
  .header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
    &.center {
      justify-content: center;
    }
    .tab-list,
    .actions {
      display: flex;
      align-items: center;
    }
    .tab-item {
      margin-right: 20px;
      font-size: 16px;
      cursor: pointer;
      &.active {
        color: #2d8cf0;
        font-weight: 600;
      }
    }
    .actions {
      .status,
      .ivu-btn {
        margin-right: 10px;
      }
      .status {
        display: inline-flex;
        padding: 2px 6px;
        border-radius: 6px;
        font-size: 13px;
        -webkit-box-align: center;
        align-items: center;
        white-space: nowrap;
        border: 1px solid rgb(211, 202, 255);
        background: rgb(240, 238, 255);
        color: rgb(111, 93, 215);
        box-sizing: border-box;
        &-point {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: rgb(111, 93, 215);
          margin-right: 6px;
        }
      }
    }
  }
}
</style>
